{% extends "core/base.html" %}

{%block scripts%}
  <script type="text/javascript">
    function limpiar(){
        $('#invitar_a').val('')
    }
    
    $(function(){         
        $('#invitar_a').autocomplete({
	    source: function(request, response){
		$.post("/core/buscar_usuario/?q="+request.term, {}, function(data){     
		    response($.map(data, function(item) {
			return {
			    label: item.fields.first_name+" "+item.fields.last_name,
			    value: item.fields.username
			}
		    }))
		}, "json");
	    },
            select: function(e, ui) {
		var input = '<input type="hidden" name="miembros" value="'+ui.item.value+'"/>'
                $('#invitados').append('<span>'+input+'<a class="remove" href="javascript: " title="Remover">x</a>'+ui.item.label+'</span>')
                $('#invitar_a').val('')
		this.value = ""
		return false;
            },    
            change: function(){
                //prevent 'to' field being updated and correct position 
                $("#invitar_a").val("").css("top", 2);
            } 
        });                                                                    
        $("#invitados").click(function(){
            $("#invitar_a").focus();
        });
        
        //limpiar
        $('#invitar_a').click(limpiar)  
        //agregar handler para remover
        $(".remove", document.getElementById("invitados")).live("click", function(){            
            //remover invitado
            $(this).parent().remove();
            //corregir posicion
            if($("#invitados span").length === 0) {
                $("#invitados").css("top", 0);
            }                           
        });
    });
  </script>
{%endblock%}

{%block titulo%}Crear grupo{%endblock%}

{%block contenido%}
<form action="crear_grupo" method="post">
    {% csrf_token %}    
  <fieldset>    
    <label for="nombre">Nombre del grupo:</label>	  
    <div>
      <input type="text" name="nombre" value="{{ grupo  }}" />
      {% if form.nombre.errors %}
	{% for error in form.nombre.errors %}
	  <span class="error">{{ error }}</span>
	{% endfor %}
      {% endif %}
    </div>
  
    <label for="invitar_a">Invitar a:</label>
    <div>
      <input id="invitar_a"  title="type &quot;a&quot;" />
    </div>
    <label for="invitados">Invitados:</label>
    <div id="invitados">	    
    </div>
  </fieldset>
  <p>
    {% if fallo_en_crear_grupo %}
      <span class="error">Fallo en crear grupo {{ razon_de_fallo }}</span>
    {% endif %}
    <input type="submit" value="Crear" />
  </p>  
</form>

{%endblock%}

